﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleUpload.aspx.cs" Inherits="SampleUpload" %>

<!DOCTYPE html>
<script src="JS/jquery-1.9.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function fnUpload()
        { 
            debugger;
            var fileUpload = $("#fupload").get(0);
            var files = fileUpload.files;

            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }

            $.ajax({
                url: "FileUploadHandler.ashx",
                type: "POST",
                data: data,
                contentType: false,
                processData: false,
                success: function (result) { alert(result); },
                error: function (err) {
                    alert(err.statusText)
                }
            });

            evt.preventDefault();
            return false;
        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>Upload File using Jquery AJAX in Asp.net</h3>
            <table>
                <tr>
                    <td>File:</td>
                    <td>
                        <asp:FileUpload ID="fupload" runat="server" /></td>
                    <td>
                        <asp:Image ID="imgprv" runat="server" Height="90px" Width="75px" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnUpload" runat="server" CssClass="button" OnClientClick="return fnUpload();" Text="Upload Selected File" /></td>
                </tr>
            </table>

        </div>
    </form>
</body>
</html>
